<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>debounce 演示</title>
</head>
<body>
<input type="text" id="input1">

<script>
// TODO: 防抖应用场景: 监听一个输入框, 文字变化后触发 change 事件
// 直接用 keyup 事件, 则会频繁触发 change 事件
// 防抖: 用户输入结束或暂停时, 才会触发 change 事件
const input1 = document.getElementById('input1')

// let timer = null
// input1.addEventListener('keyup', function () {
//     if (timer) {
//         clearTimeout(timer)
//     }
//     timer = setTimeout(() => {
//         // 模拟触发 change 事件
           // TODO: 封装下, 将下面的代码以 回调函数 的方式传进来
//         console.log(input1.value)

//         // 清空定时器
//         timer = null
//     }, 500)
// })

// TODO: 防抖是对函数的封装, 最后返回必须还是一个函数
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () { // 该函数式 事件调用的那个函数
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // fn()
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

</script>
</body>
</html>